/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-08 12:02:54
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-08 16:29:46
 */
import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
  Switch,
  Redirect,
  useParams,
  useHistory,
  useLocation,
} from 'react-router-dom'
import First from './First'
import Second from './Second'
import Third from './Third'
import Logout from './Logout'
import Forth from './Forth'

const Layout = (props) => {
  console.log(props, 88772)
  const params = useParams()
  const History = useHistory()
  const Location = useLocation()
  console.log(params, 333)
  console.log(Location, 766)
  return (
    <div className="layout">
      <header>
        <Link to="/logout">退出</Link>
      </header>
      <div className="box">
        <div className="sideBar">
          <ul>
            {/* <li>
              <NavLink to="/layout/first">first</NavLink>
            </li>
            <li>
              <NavLink to="/layout/second">second</NavLink>
            </li>
            <li>
              <NavLink to="/layout/third">third</NavLink>
            </li> */}
            <li onClick={() => props.history.replace('/layout/first')}>
              first
            </li>
            <li onClick={() => props.history.replace('/layout/second')}>
              second
            </li>
            <li onClick={() => props.history.replace('/layout/third')}>
              third
            </li>
          </ul>

          <ol>
            {/* <li>
              <NavLink to="/layout/forth/2/rose">forth====动态路由</NavLink>
            </li> */}
            <li
              onClick={() => History.push('/layout/forth/2/jack?gender=1222')}
            >
              {/* <NavLink
                to={{
                  pathname: '/layout/forth/2/jack',
                  state: { id: 1, name: 'rose' },
                }}
              >
                对象===forth====动态路由
              </NavLink> */}
              useHistory
            </li>
          </ol>
        </div>
        <main>
          <Route exact path="/" component={First}></Route>
          <Route path="/layout/first" component={First}></Route>
          <Route path="/layout/second" component={Second}></Route>
          <Route path="/layout/third" component={Third}></Route>
          <Route path="/layout/forth/:id/:name" component={Forth}></Route>
          <Route path="/layout/logout" component={Logout}></Route>
        </main>
      </div>
    </div>
  )
}
/* 
{
  path:'/cate/:id/:name',
  component:Cate
}
<router-link to='/cate/12/jack'></router-link>
<router-link to={name:'cate',query:{},params:{}}></router-link>

*/
export default Layout
